<template>
  <div id="app">
     <div>
         <span>列表</span>
         <span @click="status = !status">新增</span>
         <ul v-show="status">
             <li v-for="(item,index) in list" :key="item.id" @click="add(item.id)">{{item.type}}</li>
         </ul>
         <table>
             <tr>
                 <td>类型</td>
                 <td>账号</td>
                 <td>提示</td>
                 <td>操作</td>
             </tr>
             <el-tr v-for="lItem in addList" :lItem="lItem" :key="lItem.id"
                @changeTip="changeTip"
                @del="del"
             ></el-tr>
         </table>
         <div class="right">
             <icon v-for="iItem in addList" :key="iItem.id"
                :bgColor="iItem.bgColor"
                :icon="iItem.icon"
                :tip="iItem.tip"
             ></icon>
         </div>
     </div>
     <input type="text" v-focus>
  </div>
</template>

<script>
import elTr from './components/el-tr'
import icon from './components/icon'
export default {
    components:{
        elTr,
        icon
    },
    directives:{
        focus:{
            bind(){
                
            }
        }
    },
    created(){
        this.getData()
    },
    data(){
        return {
            list:[],
            addList:[],
            status:false
        }
    },
    methods:{
        getData(){
            this.$http.get('/api/list').then((res) => {
                if(res.data.code === 1){
                    this.list = res.data.data;
                }
            }).catch((error) =>{
                console.warn(error);
            })
        },
        add(id){
            let isHas = this.addList.findIndex(item => item.id === id);
            let target = this.list.find(item => item.id === id);
            if(isHas == -1){
                this.addList.push(target);
            }else{
                alert('已添加')
            }
        },
        changeTip(tip,id){
            let index = this.addList.findIndex(item => item.id === id);
            this.addList[index].tip = tip;
        },
        del(id){
            let index = this.addList.findIndex(item => item.id === id);
            this.addList.splice(index,1);
        }
    }
}
</script>

<style lang="scss">
@import './assets/font/iconfont.css';
.right{
    position:absolute;
    right:0;
    bottom:20px;
}
</style>
